﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="../assets/images/logo.png">
    <title>Document</title>

    <!-- 引入css：elementUi、bootstrap、bootstrap-icons、normalize统一规范、index -->
    <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="../assets/css/normalize.css">
    <link rel="stylesheet" href="../assets/css/index.css">

    <!-- 引入JS：vue、elementUI、jQuery、bootstrap -->
    <script src="../node_modules/vue/dist/vue.min.js"></script>
    <script src="../node_modules/element-ui/lib/index.js"></script>
    <script src="../node_modules/jQuery/tmp/jquery.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <!-- 引入http-vue-loader：html页面中引入VUE组件需要的包 -->
    <!-- <script src="https://unpkg.com/http-vue-loader"></script> -->
    <script src="../node_modules/http-vue-loader/src/httpVueLoader.js"></script>
    <script src="../node_modules/axios/dist/axios.min.js"></script>
    <script src="../assets/js/common.js"></script>

</head>

<body>

<div id="app">
    <!-- 引入头部组件 -->
    <my-header></my-header>

    <!-- 内容：关键字搜索 -->
    <!-- 类解释：navbar-form【导航栏中的表单】 -->
    <div class="navbar-form searchdiv">
        <form action="">
            <!-- 类解释：input-group【输入组】 -->
            <div class="input-group">
                <!-- 类解释：form-control【表单控件】，自定义类search -->
                <input type="text" v-model="keyword" class="form-control search" placeholder="搜索关键字"/>
                <!-- 类解释：输入组文本，背景颜色蓝色 -->
                <a class="input-group-text bg-primary" href="javascript:;" @click="keywordQuery">
                    <i class="bi bi-search"></i>
                </a>
            </div>
        </form>
    </div>

    <!--
        主体内容
        container：设置版心为两端留白
        style="margin-top: 80px;"：设置版心上外边距为60px
    -->
    <main class="container" style="margin-top: 70px;">
        <!-- row：将整个版心设置为一行，开启网格系统 -->
        <div class="row">
            <!-- col-md-8：设置主题内容左半部分为8格
                col-xs-12：设置主体内容在xs尺寸下占12格
            -->
            <div class="col-md-8 col-xs-12">
                <!-- 卡片一
                        card：开启卡片
                        mt-3：每个卡片距离上外边距为rem:3
                -->
                <div class="card mt-3" v-for="article in articles">
                    <div class="card-body d-flex">
                        <a :href="'blog-detail.html?'+article.id">
                            <img :src="article.articlePic" class="card-img-top card-cover img-fluid" alt="...">
                        </a>
                        <div class="ms-3">
                            <a :href="'blog-detail.html?'+article.id" class="card-link text-decoration-none text-primary">
                                <h5>{{article.articleName}}</h5>
                            </a>
                            <p style="font-family: Georgia" class="card-text opacity-50">
                                &bull; {{article.createTime}}
                            </p>
                            <p class="card-text">{{article.articleRemark}}</p>
                        </div>
                    </div>
                    <hr class="mx-4 my-0">
                    <div class="d-flex justify-content-between align-items-center px-4" style="height: 60px;">
                        <div>
                            <i class="bi bi-folder2-open opacity-50"></i>
                            <span class="card-text">{{article.articleTypeName}}</span>
                            <i class="bi bi-tags opacity-50"></i>
                            <span class="card-text">{{article.articleTag}}</span>
                        </div>
                        <a :href="'blog-detail.html?'+article.id" class="card-link btn btn-primary read">阅读全文</a>
                    </div>
                </div>


                <!--
                    分页部分
                    text-end：设置分页位置靠右
                    overflow-auto：溢出自适应，屏幕缩小后分页栏有水平滚动条
                -->
                <div class="text-end my-3 overflow-auto" style="margin-bottom: 50px;">
                    <el-pagination :current-page="currentPage" :page-size="pageSize" @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange" :current-page="currentPage"
                                   :page-sizes="[3, 5, 10]" background
                                   layout="total, sizes, prev, pager, next, jumper" :total="totals">
                    </el-pagination>
                </div>
            </div>

            <!-- 侧边栏
                sidebar：用于使用jQuery引入侧边栏组件
                col-md-4：此侧边栏站整个网格的4份
                mb-5：侧边栏距离下面5rem
                d-none d-sm-block：在xs尺寸下隐藏，适用于手机
            -->
            <div class="sidebar col-md-4 mb-5 d-none d-sm-block">
                <my-sidebar></my-sidebar>
            </div>
        </div>
    </main>
</div>


<script>
    /* 必须要挂载分页栏才会起作用 */
    new Vue({
        el: "#app",
        data: {
            //分页数据
            articles: [],
            currentPage: 1,
            pageSize: 3,
            totals: 0,
            //高级查询
            keyword: ''
        },
        methods: {
            getArticles(){
                //1.组装参数
                let params = {
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                    articleState: 1, //前台系统只要发布的文章
                    keyword: this.keyword
                }
                //2.发送请求
                this.$http.post("/article",params).then(res=>{
                    this.articles = res.data.list;
                    this.totals = res.data.total;
                })
            },
            handleSizeChange(pageSize){
                this.pageSize = pageSize;
                this.getArticles();
            },
            handleCurrentChange(currentPage){
                this.currentPage = currentPage;
                this.getArticles();
            },
            keywordQuery(){
                this.currentPage = 1;
                this.getArticles();
            }
        },
        components: {
            // 将组建加入组建库
            'my-header': httpVueLoader('./common/header.vue'),
            'my-sidebar': httpVueLoader('./common/sidebar.vue')
        },
        mounted() {
            this.getArticles();

        },
    })
</script>
</body>

</html>